<script>
export default {
  name: 'DPopover',
  model: {
    prop: 'visible',
    event: 'visibleChange'
  },
  props: {
    title: {
      type: String
    },
    overlayClassName: {
      type: String
    },
    placement: {
      type: String,
      default: 'top'
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    arrowPointAtCenter: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: null
    }
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    }
  },
  render() {
    const props = {
      arrowPointAtCenter: this.arrowPointAtCenter
    };
    if (this.title) {
      props.title = this.title;
    }
    if (this.overlayClassName) {
      props.overlayClassName = this.overlayClassName;
    }
    if (this.placement) {
      props.placement = this.placement;
    }
    if (this.trigger) {
      props.trigger = this.trigger;
    }
    if (this.visible != null) {
      props.visible = this.visible;
    }
    const on = {
      click: this.handleClick
    };
    return (
      <a-popover props={props} on={on} scopedSlots={this.$scopedSlots}>
        {this.$slots.default}
      </a-popover>
    );
  }
};
</script>

<style lang="scss">
.tw-popover-inner {
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
.tw-popover-inner-content {
  padding: 20px;
}
</style>
